import { useState, useEffect, cloneElement } from 'react';
const App = () => {
    const initialProducts = [{
        id: 1,
        name: 'Baklava',
        count: 1,
    }, {
        id: 2,
        name: 'Cheese',
        count: 5,
    }, {
        id: 3,
        name: 'Spaghetti',
        count: 2,
    }];

    const [products, setProducts] = useState(initialProducts)

    // 克隆
    function deepClone(obj) {
        if (typeof obj !== 'object' || obj === null) {
            return obj;
        }

        let clone = Array.isArray(obj) ? [] : {};
        for (let key in obj) {
            if (obj.hasOwnProperty(key)) {
                clone[key] = deepClone(obj[key]);
            }
        }

        return clone;
    }
    // 随机字符串
    function generateRandomString(length) {
        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        let randomString = '';

        for (let i = 0; i < length; i++) {
            const randomIndex = Math.floor(Math.random() * characters.length);
            randomString += characters[randomIndex];
        }

        return randomString;
    }

    function handleIncreaseClick(productId) {
        console.log('increase', productId);
        setProducts(products.map(product => {
            if (product.id === productId) {
                return {
                    ...product,
                    count: product.count + 1
                };
            } else {
                return product;
            }
        }))
    }
    function handjianjianClick(productId) {
        console.log('increase', productId);
        setProducts(products.map(product => {
            if (product.id === productId) {
                return {
                    ...product,
                    count: product.count - 1
                };
            } else {
                return product;
            }
        }).filter(p =>
            p.count > 0
        ))
    }
    function add() {
        let nearr = deepClone(products || [])
        // 找出最大值ID
        // let maxId = Math.max(...nearr.map(obj => obj.id));
        let maxId
        nearr.length > 0 ? maxId = Math.max(...nearr.map(obj => obj.id)) : maxId = 0;

        // let maxId = nearr.sort((a, b) => b.id - a.id)?.[0]?.id || 0
        setProducts([...products, { id: ++maxId, name: generateRandomString(5), count: Math.floor(Math.random() * 10) + 1 }])
    }

    useEffect(() => {
        console.log(products, 'products')
    }, [products])

    const btnStyle = {
        width: '50px',
        height: '50px',
        marginLeft: '10px'
    }
    return (
        <div className='useSt'>
            <ul>
                {products.map(product => (
                    <li key={product.id}>
                        {product.name}
                        {' '}
                        (<b>{product.count}</b>)
                        <button style={btnStyle} onClick={() => {
                            handleIncreaseClick(product.id);
                        }}>
                            +
                        </button>
                        <button style={btnStyle} onClick={() => {
                            handjianjianClick(product.id);
                        }}>
                            -
                        </button>

                    </li>
                ))}
            </ul>
            <button style={{ display: products.length === 0 ? '' : 'none' }}>123</button>
            <button onClick={() => add()}>添加</button>
        </div>
    )
}
export default App;